<script>
import Api from '@/api/index.js'
import loadingSVG from './images/loading.svg'
const originSize = 15;
export default {
  name: "manager",
  components: {
  },
  data() {
    return {
      loadingSVG: `
        <circle class="path" cx="25" cy="25" r="10" fill="none">
        </circle>
      `,
      // 正在上传
      isUploading: false,
      // 正在导出
      isExporting: false,
      originSize: originSize,
      formData: {
        wtfl: '',
        ssxq: '',
        ssgs: '',
        page: 1,
        handleUpdateTime: dayjs().format('YYYY-MM-DD'),
        updateTime: dayjs().format('YYYY-MM-DD'),
        size: originSize
      },
      totalDataLength: 0,
      tableData_s: "",
      tableData: [],
      dialogVisible: false,
      dialogVisibleDetail: false,
      // 当前选中的一行数据
      currentRow: null,
      dialogVisibleMuti: false,
      // 还原系统的设置
      dialogVisibleResetSetting: false,
      selectionArr: []
    };
  },
  computed: {
    mainStyle() {
      let maxHeight = (window.innerHeight - 310) / window.dpr;
      return {
        height: maxHeight + 'px'
      }
    },
  },
  watch: {},
  mounted() {
    this.doSearch()
  },
  beforeUnmount() { },
  methods: {
    //  查询
    doSearch() {
      this.tableData = [{
        indiFrom: '热源',
        name: '出厂水温',
        content: '出厂水温',
        importantanceName: '核心',
        importantanceCode: 1,
        remarks: '“一供”起始参数'
      }, {
        indiFrom: '热源',
        name: '出厂水压',
        content: '出厂水压',
        importantanceName: '核心',
        importantanceCode: 1,
        remarks: '“一供”起始参数'
      }, {
        indiFrom: '热源',
        name: '回厂水温',
        content: '回厂水温',
        importantanceName: '核心',
        importantanceCode: 1,
        remarks: '“一供”起始参数'
      }, {
        indiFrom: '热源',
        name: '回厂水压',
        content: '回厂水压',
        importantanceName: '核心',
        importantanceCode: 1,
        remarks: '“一供”起始参数'
      }, {
        indiFrom: '热源',
        name: '锅炉温度压力',
        content: '锅炉温度压力',
        importantanceName: '重要',
        importantanceCode: 2,
        remarks: ''
      }, {
        indiFrom: '热源',
        name: '皮带机状态',
        content: '皮带机状态',
        importantanceName: '重要',
        importantanceCode: 2,
        remarks: ''
      }, {
        indiFrom: '热源',
        name: '给煤机状态',
        content: '给煤机状态',
        importantanceName: '重要',
        importantanceCode: 2,
        remarks: ''
      }, {
        indiFrom: '热源',
        name: '烟气污染物排放',
        content: '烟气污染物排放',
        importantanceName: '一般',
        importantanceCode: 3,
        remarks: ''
      }, {
        indiFrom: '热源',
        name: '煤粉粉尘',
        content: '煤粉粉尘',
        importantanceName: '一般',
        importantanceCode: 3,
        remarks: ''
      }, {
        indiFrom: '热源',
        name: '风室温度、压力',
        content: '风室温度、压力',
        importantanceName: '一般',
        importantanceCode: 3,
        remarks: ''
      }, {
        indiFrom: '热源',
        name: '烟气炉温度、压力',
        content: '烟气炉温度、压力',
        importantanceName: '一般',
        importantanceCode: 3,
        remarks: ''
      },

      {
        indiFrom: '换热站',
        name: '一供温度',
        content: '换热站监测的一供温度',
        importantanceName: '核心',
        importantanceCode: 1,
        remarks: '反映热源输出能力，是否满足设计负荷。'
      }, {
        indiFrom: '换热站',
        name: '一供压力',
        content: '换热站监测的一供压力',
        importantanceName: '核心',
        importantanceCode: 1,
        remarks: '确保高温水能输送到源端换热站（示例：若热源出口压力设计为1.6MPa，但某换热站入口压力仅0.8MPa，表明管网存在泄漏或局部堵塞风险）。'
      }, {
        indiFrom: '换热站',
        name: '一回温度',
        content: '换热站监测的一回温度',
        importantanceName: '核心',
        importantanceCode: 1,
        remarks: '温差异常可能表明热源效率下降或管网热损失过大。'
      }, {
        indiFrom: '换热站',
        name: '一回压力',
        content: '换热站监测的一回压力',
        importantanceName: '核心',
        importantanceCode: 1,
        remarks: '需维持足够压力（如0.3~0.5MPa），防止循环停滞或倒流'
      }, {
        indiFrom: '换热站',
        name: '二供温度',
        content: '换热站监测的二供温度',
        importantanceName: '核心',
        importantanceCode: 1,
        remarks: '二次供水温度（75°C~85°C，按气候补偿动态调整）---发现换热器结垢、循环泵故障等问题（温度持续偏低）'
      }, {
        indiFrom: '换热站',
        name: '二供压力',
        content: '换热站监测的二供压力',
        importantanceName: '核心',
        importantanceCode: 1,
        remarks: '二次供水压力（换热站出口压力0.6~1.0MPa，末端≥0.2MPa）'
      }, {
        indiFrom: '换热站',
        name: '二回温度',
        content: '换热站监测的二回温度',
        importantanceName: '核心',
        importantanceCode: 1,
        remarks: '二次回水温度（55°C~60°C，温差20~25°C）'
      }, {
        indiFrom: '换热站',
        name: '二回压力',
        content: '换热站监测的二回压力',
        importantanceName: '核心',
        importantanceCode: 1,
        remarks: '二次回水压力（与供水压差反映管网阻力）'
      }, {
        indiFrom: '换热站',
        name: '循环泵',
        content: '循环泵状态',
        importantanceName: '重要',
        importantanceCode: 2,
        remarks: ''
      }, {
        indiFrom: '换热站',
        name: '调流泵',
        content: '阀门开度',
        importantanceName: '重要',
        importantanceCode: 2,
        remarks: '阀门开度（调解各支路流量分配）'
      }, {
        indiFrom: '换热站',
        name: '补水泵',
        content: '启停记录、次数、补水量',
        importantanceName: '重要',
        importantanceCode: 2,
        remarks: '启停记录、次数、补水量（维持系统压力稳定）'
      },]

      return
      Api.getComplainListData({
        page: this.formData.page,
        size: this.formData.size,
        ssgs: this.formData.ssgs,
        ssxq: this.formData.ssxq,
        wtfl: this.formData.wtfl,
        updateTime: this.formData.updateTime,
      }).then(res => {
        if (res.data && res.data.length) {
          res.data.forEach(v => {
            v.bjsx = dayjs(v.bjsx).format('YYYY/MM/DD HH:mm:ss');
            v.pdsj = dayjs(v.pdsj).format('YYYY/MM/DD HH:mm:ss');
          })
          this.tableData = res.data;
          this.totalDataLength = res.count;
        } else {
          this.tableData = [];
          this.totalDataLength = 0;
        }
      })
    },
    //  重置
    reset() {
      this.formData.ssgs = '';
      this.formData.ssxq = '';
      this.formData.wtfl = '';
      this.formData.page = 1;
      this.formData.size = this.originSize;
      this.formData.updateTime = dayjs().format('YYYY-MM-DD')
      this.doSearch();
    },
    handleUpload() {
      this.$refs.fileInput.click(); // 触发文件选择
    },
    readExcel(event) {
      this.isUploading = true;
      const fileList = event.target.files;
      this.excelName = fileList[0].name
      const excelFile = this.$refs.fileInput.files[0];
      const formData = new FormData();
      formData.append('file', excelFile)
      Api.uploadSheetFile(formData).then(res => {
        this.doSearch()
      }).finally(_ => {
        this.isUploading = false;
      })
      // 手动清空数据
      this.$refs.fileInput.value = null;
    },
    changeType(v) {
      this.doSearch();
    },
    // 搜索热源
    doSearchSource() {
      this.doSearch()
    },
    // 搜索热源
    doSearchArea() {
      this.doSearch();
    },
    // 确认删除掉
    confirmDelete(v) {
      if (!v) {
        return
      }
      if (!v.id) {
        return;
      }
      Api.deleteSingleComplainInfo({
        id: v.id
      }).then(res => {
        this.$message({
          message: res.msg,
        })
        this.reset();
      })
      this.dialogVisible = false;
      this.currentRow = null;
    },
    // 查看详情
    checkDetailData() {
    },
    // 当前页码改变
    currentChange(v) {
      this.formData.page = v;
      this.doSearch();
    },
    //  导出
    handleDwonload() {
      this.isExporting = true;
      const stamp = this.formData.handleUpdateTime || dayjs().format('YYYY-MM-DD')
      Api.exportSingleWORDfile({
        // 当日时间
        time: stamp,
      }).then(res => {
        this.isExporting = false;
        const blob = new Blob([res], {
          type: res.type
        });
        const url = window.URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.download = stamp + '.doc';
        link.style.display = 'none';
        document.body.appendChild(link)
        link.click();
        document.body.removeChild(link)
        window.URL.revokeObjectURL(url)
      }).finally(_ => {
        this.isExporting = false;
      })
    },
    handleSelectionChange(v) {
      if (!v.length) {
        this.selectionArr = []
      } else {
        this.selectionArr = v.map(v_ => v_.id)
      }

    },
    confirmDeleteMuti() {
      if (!this.selectionArr.length) { return }
      Api.deleteMutiComplainInfo(this.selectionArr).then(res => {
        this.$message({
          message: res.msg,
        })
        this.reset();
      }).finally(_ => {
        this.dialogVisibleMuti = false;
      })
    },
    // 还原所有的设置
    doResetAll() { },
    // 添加新的设置
    doAddNewSingleSetting() { }
  },
};
</script>

<template>
  <!-- layout 外包层 -->
  <div class="manager full-height">
    <div class="titles-area">
      <div class="main-title font-alimamashuheiti">
        阈值列表
      </div>
      <div class="sub-title font-AlibabaPuhui">
        展示供热系统各项监测指标的阈值设置
      </div>
    </div>
    <div class="search-area">
      <el-row :gutter="10" justify="end">
        <!-- <el-col :span="3">
          <el-input placeholder="请输入公司名称" v-model="formData.ssgs" @keyup.enter="doSearchSource()"></el-input>
        </el-col>
        <el-col :span="3">
          <el-input placeholder="请输入小区名称" v-model="formData.ssxq" @keyup.enter="doSearchArea()"></el-input>
        </el-col>
        <el-col :span="2">
          <el-select placeholder="请选择投诉类型" v-model="formData.wtfl" clearable @change="changeType">
            <el-option value="供暖不热" label="供暖不热"></el-option>
            <el-option value="申请供热服务" label="申请供热服务"></el-option>
            <el-option value="收费退费欠费赔偿等问题" label="收费退费欠费赔偿等问题"></el-option>
            <el-option value="供热设施维修" label="供热设施维修"></el-option>
            <el-option value="非市政集中供热问题" label="非市政集中供热问题"></el-option>
            <el-option value="其它问题" label="其它问题"></el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-date-picker
              style="width: 100%"
              v-model="formData.updateTime"
              type="date"
              placeholder="请选择更新时间"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
          >
          </el-date-picker>
        </el-col> -->
        <el-col :span="12">
          <!-- <el-button type="primary" @click="() => {
            doSearch()
          }">查询</el-button>
          <el-button type="info" @click="() => {
            reset()
          }">重置</el-button> -->
          <!-- <el-popover
            placement="bottom"
            trigger="click"
            title="请先选择生成报告的时间"
            width="300"
          >
            <div class="date-picker-wrapper">
              <el-date-picker
                  style="width: 100%"
                  v-model="formData.handleUpdateTime"
                  type="date"
                  :teleported="false"
                  placeholder="请选择更新时间"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
              >
              </el-date-picker>

              <div style="text-align: right;margin-top: 1rem;">
                <el-button type="primary" @click="handleDwonload" size="small">确认</el-button>
              </div>
            </div>
            <template #reference>
              <el-button
                  type="primary"
                  plain
                  :disabled="isExporting"
                  v-loading="isExporting"
                  :element-loading-svg="loadingSVG"
                  element-loading-svg-view-box="0,0,50,50"
                  element-loading-background="rgba(0, 0, 0, 0.2)"
              >
                <el-icon class="el-icon--right" style="margin-right: 5px">
                  <Document />
                </el-icon>生成报告
              </el-button>
            </template>
</el-popover> -->

          <!-- <el-button
              type="primary"
              @click="doAddNewSingleSetting"
              :disabled="isUploading"
              v-loading="isUploading"
              :element-loading-svg="loadingSVG"
              element-loading-svg-view-box="0,0,50,50"
              element-loading-background="rgba(0, 0, 0, 0.2)"
          >
            <el-icon class="el-icon--right" style="margin-right: 5px">
              <Plus />
            </el-icon>新增设置
          </el-button>
          <el-button
              type="danger"
              plain
              @click="() => { dialogVisibleMuti = true; }"
              :disabled="selectionArr.length < 2"
          >
            <el-icon class="el-icon--right" style="margin-right: 5px">
              <Delete />
            </el-icon>
            删除设置
            <span v-if="selectionArr.length >= 2">
              ({{ selectionArr.length }})
            </span>
          </el-button>
          <el-button
              type="info"              
              link
              @click="() => { dialogVisibleResetSetting = true; }"
          >
            <el-icon class="el-icon--right" style="margin-right: 5px">
              <Refresh />
            </el-icon>
            还原系统设置
            <span v-if="selectionArr.length >= 2">
              ({{ selectionArr.length }})
            </span>
          </el-button>
          <input type="file" accept=".xlsx, .xls" ref="fileInput" @change="readExcel" style="display:none;" /> -->
        </el-col>
      </el-row>
    </div>
    <div class="list-area">
      <el-table :data="tableData" :style="mainStyle" border stripe @selection-change="handleSelectionChange"
        row-key="id" empty-text="暂无数据" :default-sort="{ prop: 'ssgs', order: 'descending' }">
        <el-table-column header-align="center" align="center" type="selection" width="60" />
        <el-table-column header-align="center" type="index" label="序号" align="center" width="70" />

        <el-table-column header-align="center" align="center" prop="name" label="指标名称" width="300" sortable />
        <el-table-column header-align="center" prop="content" label="内容" width="300" sortable />
        <el-table-column header-align="center" align="center" prop="importantanceCode" label="指标等级（重要性）" width="220"
          sortable>
          <template #default="scope">
            <el-tag v-if="scope.row.importantanceCode === 1" link type="danger" size="small">
              {{ scope.row.importantanceName }}
            </el-tag>
            <el-tag v-if="scope.row.importantanceCode === 2" link type="primary" size="small">
              {{ scope.row.importantanceName }}
            </el-tag>
            <el-tag v-if="scope.row.importantanceCode === 3" link type="info" size="small">
              {{ scope.row.importantanceName }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" prop="indiFrom" label="指标来源" width="150" sortable />
        <el-table-column header-align="center" prop="remarks" label="备注说明" sortable />
        <!-- <el-table-column header-align="center" fixed="right" label="操作" width="150">
          <template #default="scope">
            <el-button link type="danger" size="small"
              @click="(e) => { currentRow = scope.row; dialogVisible = true; }">
              删除
            </el-button>
            <el-button link type="primary" size="small"
              @click="(e) => { currentRow = scope.row; dialogVisibleDetail = true; }">
              修改
            </el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <div class="page-area">
        <!-- <el-pagination background :page-size="formData.size" @current-change="currentChange" layout="prev, pager, next"
          :total="totalDataLength" /> -->
      </div>
      <el-dialog v-model="dialogVisible" title="删除" width="300">
        <p class="" style="font-size: 16px;">请确认是否删除</p>
        <template #footer>
          <div class="dialog-footer">
            <el-button size="small" @click="dialogVisible = false; currentRow = null;">取消</el-button>
            <el-button size="small" type="danger" @click="confirmDelete(currentRow)">
              删除
            </el-button>
          </div>
        </template>
      </el-dialog>

      <el-dialog v-model="dialogVisibleResetSetting" title="还原系统设置" width="300">
        <p class="" style="font-size: 16px;">请确认是否还原所有的设置</p>
        <template #footer>
          <div class="dialog-footer">
            <el-button size="small" @click="dialogVisibleResetSetting = false;">取消</el-button>
            <el-button size="small" type="danger" @click="doResetAll()">
              还原
            </el-button>
          </div>
        </template>
      </el-dialog>

      <el-dialog v-model="dialogVisibleMuti" title="批量删除" width="300">
        <p class="" style="font-size: 16px;">请确认是否批量删除选中的 {{ selectionArr.length }} 项记录</p>
        <template #footer>
          <div class="dialog-footer">
            <el-button size="small" @click="dialogVisibleMuti = false;">取消</el-button>
            <el-button size="small" type="danger" @click="confirmDeleteMuti()">
              删除
            </el-button>
          </div>
        </template>
      </el-dialog>

      <el-dialog v-model="dialogVisibleDetail" width="500" title="投诉信息详情">
        <div v-if="currentRow">
          <el-descriptions class="margin-top" :column="1" border label-width="120">
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  所属公司
                </div>
              </template>
              <span>{{ currentRow.ssgs }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  所属小区
                </div>
              </template>
              <span>{{ currentRow.ssxq }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  问题分类
                </div>
              </template>
              <span>{{ currentRow.wtfl }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  派单时间
                </div>
              </template>
              <span>{{ currentRow.pdsj }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  办结时限
                </div>
              </template>
              <span>{{ currentRow.bjsx }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  投诉渠道
                </div>
              </template>
              <span>{{ currentRow.tsqd }}</span>
            </el-descriptions-item>

            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  主要内容
                </div>
              </template>
              <span>{{ currentRow.zynr }}</span>
            </el-descriptions-item>

            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  主诉求描述
                </div>
              </template>
              <span>{{ currentRow.zsqms }}</span>
            </el-descriptions-item>

            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  来电人
                </div>
              </template>
              <span>{{ currentRow.ldr }}</span>
            </el-descriptions-item>

            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  联系方式
                </div>
              </template>
              <span>{{ currentRow.lxfs }}</span>
            </el-descriptions-item>
          </el-descriptions>

        </div>
        <template #footer>
        </template>
      </el-dialog>
    </div>

  </div>
</template>
<style></style>
<style lang="less">
.manager {

  &>.list-area {
    height: calc(100% - 50px);

    &>.page-area {
      height: 50px;
    }
  }
}

.search-area {
  margin-bottom: 1rem;
}

.page-area {
  padding-right: 1rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: #fff;
}

.titles-area {
  &>.main-title {
    font-size: 2rem;
    line-height: 2;
  }

  &>.sub-title {
    font-size: 1.4rem;
    color: #9e9e9e;
    line-height: 2;
  }
}
</style>
